<template>

 <swiper :options="swiperOption">
    <swiper-slide v-for="(slide,index) in list" :key="index">{{ slide }}</swiper-slide>
     <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>

</template>
 
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
  export default {
    name: 'swiperAuto',
    props:['list'],
    data() {
      return {
       
      swiperOption: {
        notNextTick: true,
        // autoplay: true,
        //  手势
        grabCursor: true,
        //  flex布局
        setWrapperSize: true,

        paginationClickable: true,
        //  可用鼠标滑动
        mousewheelControl: true,

        observeParents: true,
        // 前进后退按钮
         navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
  },
  slidesPerView : "5"
      },
      }
    },
    mounted() {
     
    },
    components: { swiper, swiperSlide }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.swiper-slide{
  text-align: center;
}
.swiper-button-prev, 
.swiper-button-next{
  height: 20px;
  top:78%;
}
</style>
